<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/index1.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/detail.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/cookie.js"></script>
    <script src="../js/index1.js"></script>
</head>

<body>
    <div class="ding">
        <div class="top">
            <div class="top_left">
                <a href="">小米商城</a>
                <span class="sep">|</span>
                <a href="">MIUI</a>
                <span class="sep">|</span>
                <a href="">IOT</a>
                <span class="sep">|</span>
                <a href="">云服务</a>
                <span class="sep">|</span>
                <a href="">天星数科</a>
                <span class="sep">|</span>
                <a href="">有品</a>
                <span class="sep">|</span>
                <a href="">小爱开放平台</a>
                <span class="sep">|</span>
                <a href="">企业团购</a>
                <span class="sep">|</span>
                <a href="">资质证照</a>
                <span class="sep">|</span>
                <a href="">协议规则</a>
                <span class="sep">|</span>
                <a href="">下载APP</a>
                <span class="sep">|</span>
                <a href="">智能生活</a>
                <span class="sep">|</span>
                <a href="">Select Location</a>
            </div>
            <div class="top_right">
                <a href="../html/shoppingcar.html" class="buycar">
                    <em>🛒</em>
                    <em>购物车</em>
                    <!-- <em>(0)</em> -->
                </a>
            </div>
            <div class="top_middle">
                <div href="" class="top_login">
                    <span>登录</span>
                    <div class="top_login_hide">
                        <p>个人中心</p>
                        <p>评价晒单</p>
                        <p>我的喜欢</p>
                        <p>小米账户</p>
                        <p class="exit">推出登录</p>
                    </div>
                </div>
                <span class="sep">|</span>
                <a href="./regist.html" class="top_regist">
                    注册
                </a>
                <span class="sep">|</span>
                <a href="">消息通知</a>
            </div>
        </div>
    </div>
    <div class="shang">
        <div class="container">
            <div class="header_logo">
                <a href="../html/index.html"><img src="../images/logo-mi2.png" alt=""></a>
            </div>
            <ul class="header_nav">
                <li>
                    小米手机
                </li>
                <li>
                    Redmi红米
                </li>
                <li>
                    电视
                </li>
                <li>
                    笔记本
                </li>
                <li>
                    平板
                </li>
                <li>
                    家电
                </li>
                <li>
                    路由器
                </li>
                <li>
                    智能硬件
                </li>
                <li>
                    服务
                </li>
                <li>
                    社区
                </li>
                <div class="header_nav_hide">
                    <ul class="mi_phone">

                    </ul>
                    <ul class="mi_redmi">

                    </ul>
                    <ul class="mi_tv">

                    </ul>
                    <ul class="mi_book">

                    </ul>
                    <ul class="mi_pad">

                    </ul>
                    <ul class="mi_jiadian">

                    </ul>
                    <ul class="mi_luyouqi">

                    </ul>
                    <ul class="mi_ai">

                    </ul>
                    <!-- <ul>
                        <li>9</li>
                        <li>9</li>
                        <li>9</li>
                        <li>9</li>
                        <li>9</li>
                        <li>9</li>
                    </ul>
                    <ul>
                        <li>10</li>
                        <li>10</li>
                        <li>10</li>
                        <li>10</li>
                        <li>10</li>
                        <li>10</li>
                    </ul> -->
                </div>
            </ul>
            <div class="header_search">
                <div>
                    <input type="search" name="" id="search">
                    <span class="search_logo"><i class="iconfont icon">&#xe647</i></span>
                    <div class="search_show">
                        <ul>
                            <li>全部商品</li>
                            <li>小米11</li>
                            <li>手机</li>
                            <li>空调</li>
                            <li>小米11S</li>
                            <li>净水器</li>
                            <li>红米</li>
                            <li>洗衣机</li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="is_login">
        为方便您购买，请提前登录 &emsp;<a href="../html/regist.html">立即登录</a> <span class="is_login_close">×</span>
    </div>
    <div class="detail">

    </div>

    <div class="insert_succes">
        <div class="insert_succes1">
            <div class="ok">
                ✔
            </div>
            <div class="tishi">
                <h1>已成功加入购物车!</h1>
                <p>小米11 8GB+28GB 蓝色</p>
            </div>
            <div class="go">
                去购物车结算
            </div>
            <div class="continue">
                在逛逛
            </div>
        </div>
    </div>

</body>
<script src="../js/index1.js"></script>
<script>
    if (getCookie("id")) {
        $(".is_login").css({
            display: "none"
        })
    }

    var gid = urlParse()["gid"]
    $.post("../php/detail.php", {
            gid: gid
        },
        function(data) {
            html = ""
            var result = JSON.parse(data);
            console.log(result);
            result.forEach(({
                gid,
                imgid,
                price,
                title,
                is_own,
                jieshao,
                smalltitle,
                img_1,
                img_2,
                img_3,
                img_4,
            }) => {
                // style="border:1px solid red"
                html += `
                     <div class="detail_img">
                            <img src="${imgid}" alt="" class="img" >
                            <div class="shadow"></div>
                            <div class="fangdajing_img"><img src="${imgid}" alt="" class="bigimg"></div>
                    </div>
                    <div class="detail_right">
                    <div class="detail_right_title">
                           ${smalltitle?smalltitle:title}
                    </div>
                    <p class="detail_right_detail">
                          ${jieshao}
                    </p>
                    <div class="detail_right_company">
                        ${is_own}
                    </div>
                    <div class="detail_right_price">${price}元
                    </div>
                    <div class="detail_right_line">
                    </div>
                    <div class="detail_right_position">
                        <p><img src="../font/31dingwei.png" alt=""></p>
                        <div>
                            北京 北京市 海淀区 清河街道 <a href="">修改</a> <br>
                            <font color="#ff4a00">有现货</font>
                        </div>
                    </div>

                    <div class="detail_right_select">
                        选择版本
                    </div>
                    <div class="detail_right_select_type">
                        <div>8GB+128GB</div>
                        <div>12GB+256GB</div>
                        <div>12GB+512GB</div>
                        <div>8GB+256GB</div>
                    </div>

                    <div class="detail_right_select">
                        选择颜色
                    </div>
                    <div class="detail_right_select_color">
                        <div>陶瓷黑</div>
                        <div>影青灰</div>
                        <div>陶瓷白</div>
                    </div>
                    <div class="detail_right_select">
                        选择数量
                    </div>
                    <div class="detail_right_select_num">
                        <div class="reduce">
                            -
                        </div>
                        <div class="num">
                            1
                        </div>
                        <div class="add">
                            +
                        </div>
                    </div>
                    <div class="detail_right_select_add">
                        加入购物车
                    </div>
                    </div>  `
            });
            $(".detail").html(html);


            $(".is_login_close").click(function() {
                $(this).parent().css({
                    display: "none"
                })
            })

            $(".detail_right_select_type div").click(function() {
                $(this).css({
                    color: "#ff6700",
                    border: "1px solid #ff6700"
                }).siblings().css({
                    color: "#757575",
                    border: "1px solid #e0e0e0"
                })
            })
            $(".detail_right_select_color div").click(function() {
                $(this).css({
                    color: "#ff6700",
                    border: "1px solid #ff6700"
                }).siblings().css({
                    color: "#757575",
                    border: "1px solid #e0e0e0"
                })
            })
            $(".detail_right_select_add").bind({
                //移入购物车bgc变
                mouseover: function() {
                    $(this).css({
                        backgroundColor: "#f25807"
                    })
                },
                mouseleave: function() {
                    $(this).css({
                        backgroundColor: "#ff6700"
                    })
                }
            })



            var num = $(".detail_right_select_num .num").text() * 1;
            // console.log(num);
            $(".detail_right_select_num").on("click", ".add ", function() {
                num++;
                $(this).prev().text(num);
            })
            $(".detail_right_select_num").on("click", ".reduce ", function() {
                if (num > 1) {
                    num--;
                    $(this).next().text(num);
                }
            })

            $(".detail_right_select_add").click(function() {
                if (getCookie("id")) {
                    var [{
                        imgid,
                        title,
                        price
                    }] = result;
                    var id = getCookie("id");
                    $.post("../php/shoppingcar.php", {
                        id: id,
                        gid: gid,
                        imgid: imgid,
                        title: title,
                        price: price,
                        num: num
                    }, function(data) {
                        console.log(data);
                        $(".insert_succes").css({
                            height: "200"
                        })
                    })

                } else {
                    location.href = "../html/regist.html?" + location.href;
                }
            })


            var x1 = $(".detail_img").offset().left;
            var y1 = $(".detail_img").offset().top;
            var height = $(".detail_img").height();
            var width = $(".detail_img").width();
            var beishu = 800 / 560;
            $(".detail_img").bind({
                mouseenter: function(e) {
                    $(".shadow").css({
                        display: "block"
                    });
                    $(".fangdajing_img").css({
                        display: "block"
                    })
                },
                mousemove: function(e) {
                    var x = e.pageX - x1;
                    var y = e.pageY - y1;
                    var left = x - 100;
                    var top = y - 100;
                    if (left < 0) left = 0;
                    if (top < 0) top = 0;

                    if (left > width - 200) left = width - 200 - 45;
                    if (top > height - 200) top = height - 200;
                    $(".shadow").css({
                        top: top,
                        left: left
                    })
                    $(".bigimg").css({
                        top: -top * beishu,
                        left: -left * beishu
                    })
                },
                mouseleave: function() {
                    $(".shadow").css({
                        display: "none"
                    });
                    $(".fangdajing_img").css({
                        display: "none"
                    })
                }
            })
            $(".fangdajing_img").mouseenter(function() {
                $(this).css({
                    display: "none"
                })
            })





        })

    $(".continue").click(function() {
        $(".insert_succes").css({
            height: "0"
        })
    })
    $(".go").click(function() {
        location.href = "../html/shoppingcar.html"
    })

























    function urlParse() {
        var search = location.search;
        var data = {};
        if (search) {
            var str = search.substr(1);
            var list = str.split("&");
            for (var i = 0; i < list.length; i++) {
                var key = list[i].split("=")[0];
                var val = list[i].split("=")[1];
            }
            data[key] = val;
        }
        return data;
    }
</script>


</html>